<#include "/WEB-INF/template/common/layout/m_layout.ftl"/>
<@m_layout>
<div class="page">
    <header class="bar bar-nav">
        <title class="title">微信商城</title>
    </header>
    <@bottom_menu_bar module="home"/>
    <div class="content">
        <!-- Slider -->
        <div class="swiper-container" data-space-between='10'>
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="${CONTEXT_PATH}/img/1.jpg" alt="" style="width: 100%; height: auto; "></div>
                <div class="swiper-slide"><img src="${CONTEXT_PATH}/img/2.jpg" alt="" style="width: 100%; height: auto; "></div>
                <div class="swiper-slide"><img src="${CONTEXT_PATH}/img/3.jpg" alt="" style="width: 100%; height: auto; "></div>
                <div class="swiper-slide"><img src="${CONTEXT_PATH}/img/4.jpg" alt="" style="width: 100%; height: auto; "></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <#--<div class="card">-->
            <#--<div class="card-content">-->
                <#--<div class="card-content-inner">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>-->
            <#--</div>-->
        <#--</div>-->
        <div class="card">
            <div class="card-header">热门商品</div>
            <div class="card-content">
                <div class="row no-gutter">
                    <div class="col-33">
                        <div style="padding: 10px 0px 10px 10px;">
                            <img src="${CONTEXT_PATH}/img/1.jpg" width="78px" height="78px"/>
                        </div>
                    </div>
                    <div class="col-70">
                        <div style="padding-top: 10px;"> 一号商品</div>
                        <div>简单的商品简介就好了</div>
                        <div>
                            <span>100$</span>
                            <span>100$</span>
                        </div>
                    </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-33">
                        <div style="padding: 10px 0px 10px 10px;">
                            <img src="${CONTEXT_PATH}/img/1.jpg" width="78px" height="78px"/>
                        </div>
                    </div>
                    <div class="col-70">
                        <div style="padding-top: 10px;"> 一号商品</div>
                        <div>简单的商品简介就好了</div>
                        <div>
                            <span>100$</span>
                            <span>100$</span>
                        </div>
                    </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-33">
                        <div style="padding: 10px 0px 10px 10px;">
                            <img src="${CONTEXT_PATH}/img/1.jpg" width="78px" height="78px"/>
                        </div>
                    </div>
                    <div class="col-70">
                        <div style="padding-top: 10px;"> 一号商品</div>
                        <div>简单的商品简介就好了</div>
                        <div>
                            <span>100$</span>
                            <span>100$</span>
                        </div>
                    </div>
                </div>
            </div>
            <#--<div class="card-footer">卡脚</div>-->
        </div>
        <div class="card">
            <div class="card-header">频道1</div>
            <div class="card-content">
                <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
            </div>
            <div class="card-footer">卡脚</div>
        </div>

        <div class="content-block-title">频道2</div>
        <div class="card">
            <div class="card-content">
                <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
            </div>
            <div class="card-footer">卡脚</div>
        </div>
    </div>

    <@m_script>
        <script type="text/javascript">
            $.init();
        </script>
    </@m_script>
</div>
</@m_layout>


